import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Dialog, { SlideAnimation, DialogTitle, DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog'
import commonStyle from '../../libs/commonStyle'

export default class DialogCom extends Component {
	renderButton () {
		const {isCancel, cancelText, okText, notOk, buttonStyle, textStyle, onOK, onClose} = this.props 
		let cancel = <DialogButton
			          text={cancelText || '取消'}
								textStyle={{
									color: '#aaa'
								}}
			          onPress={() => {
									if(typeof onClose === 'function') {
										onClose()
									}
								}}
			        />
		let ok = <DialogButton
			          text={okText || '确定'}
								style={buttonStyle}
								textStyle={textStyle}
			          onPress={() => {
									if(typeof onOK === 'function') {
										onOK()
									}
									if(typeof onClose === 'function') {
										onClose()
									}
								}}
			        />
		let res = notOk? [] : [ok]
		if (isCancel) {
			res.unshift(cancel)
		}
		return res
	}
	renderTitle () {
		let {title, titleStyle={}} = this.props
		if (title) {
			return <DialogTitle style={titleStyle.style} textStyle={titleStyle.textStyle} title={title} />
		}
		return <Text />
	}
	render () {
	    const {containerStyle, visible, onClose, content } = this.props
		return (
			<View style={[styles.container, {containerStyle}]}>
			  <Dialog
					width={0.7}
			    visible={visible}
					onTouchOutside={() => {
						if(typeof onClose === 'function') {
						onClose()
						}
					}}
					dialogTitle={this.renderTitle()}
					footer={
							<DialogFooter>
								{this.renderButton()}
							</DialogFooter>
					}
			    dialogAnimation={new SlideAnimation({
			      slideFrom: 'bottom',
			    })}
			  >
			    <DialogContent style={[commonStyle.p50, commonStyle.flexCenter]}>
						{this.props.children}
						<Text style={[commonStyle.lineHeight50]}>{content}</Text>
			    </DialogContent>
			  </Dialog>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		width: '80%'
	}
})